<template>
  <Page title="练习记录">
    <template #navBarCustom>
      <div class="nav-bar-btns flex"></div>
    </template>
    <template #content>
      <div class="w-full h-full px-20px pb-20px box-border flex flex-col">
        <!-- 统计筛选 -->
        <div class="w-full py-20px flex" style="font-size: 0">
          <span class="total mr-30px"
            >总练习次数：<span class="text-51C3FF">{{ records.total }}</span></span
          >
          <el-checkbox v-model="isShowBelow70">仅看低于70分</el-checkbox>
        </div>
        <!-- 练习列表 -->
        <div class="list-wrap flex-1 flex flex-col overflow-hidden bg-white">
          <scroll-view
            ref="scroll"
            @scrolltolower="records.getList()"
            class="list flex-1 overflow-scroll w-full bg-white px-20px box-border"
          >
            <div
              v-for="i in records.list"
              :key="i.id"
              class="item w-full flex px-20px mb-20px box-border"
              @click="goToRecordDetail(i)"
            >
              <div class="main flex-1 h-full flex flex-col justify-center">
                <div class="name text-333 font-medium">
                  {{ i.title }}
                </div>
                <div class="detail flex text-A3A3A3 mt-4px">
                  <div class="">{{ i.createTime }}</div>
                </div>
              </div>

              <div class="analysis h-full flex flex-col justify-center items-center">
                <div
                  class="bg-level w-full flex-center text-white"
                  style="background-image: url('static/icons/level-high.png')"
                  v-if="i.score >= 80"
                >
                  {{ i.score }}
                </div>
                <div
                  class="bg-level w-full flex-center text-white"
                  style="background-image: url('static/icons/level-middle-yellow.png')"
                  v-else-if="i.score >= 40 && i.score < 80"
                >
                  {{ i.score }}
                </div>
                <div
                  class="bg-level w-full flex-center text-white"
                  style="background-image: url('static/icons/level-low.png')"
                  v-else
                >
                  {{ i.score }}
                </div>
                <div class="text-333 mt-2px" style="font-size: 0.16rem"> 得分 </div>
              </div>
            </div>

            <LoadMore
              cssStyle="padding-top:0.1rem"
              :loading="records.loading"
              :has-more="records.hasMore"
              @click="records.getList()"
            />
          </scroll-view>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page'
import ScrollView from '@/components/scroll-view'
import LoadMore from '@/components/load-more'
import { getEssayTrainPageApi, getCorrectChineseJsonApi } from '@/api/correct/chinese'
import { debounce } from '@/utils'

export default {
  components: {
    Page,
    ScrollView,
    LoadMore
  },
  data() {
    return {
      isShowBelow70: false,
      records: {
        vm: this._self,
        pageNo: 1,
        pageSize: 10,
        loading: false,
        hasMore: true,
        total: 0,
        list: [],
        getList: debounce(async function () {
          if (this.loading) return

          const lastScrollTop = this.vm.$refs.scroll.getScrollTop()

          this.loading = true

          const {
            data: { list, total }
          } = await getEssayTrainPageApi({
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            type: 1,
            score: this.vm.isShowBelow70 ? 70 : undefined
          })

          if (list.length < this.pageSize) {
            this.hasMore = false
          }

          if (list.length > 0) {
            this.list = this.list.concat(
              list.map((item) => {
                const { questionNumSuccess = 0, questionNum = 0 } = item

                if (!questionNumSuccess || !questionNum) {
                  item['correctRate'] = 0
                } else {
                  item['correctRate'] = (
                    (parseInt(questionNumSuccess) / parseInt(questionNum)) *
                    100
                  ).toFixed(1)
                }

                return item
              })
            )

            this.pageNo++
            this.vm.$nextTick(() => {
              this.vm.$refs.scroll.setScrollTop(lastScrollTop)
            })
          }

          this.total = total
          this.loading = false
        }, 300),
        reset: function () {
          this.pageNo = 1
          this.pageSize = 20
          this.loading = false
          this.hasMore = true
          this.list = []
        }
      }
    }
  },
  computed: {},
  watch: {
    isShowBelow70() {
      this.records.reset()
      this.records.getList()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.records.getList()
    },
    async goToRecordDetail(record = {}) {
      const { fileUrl, picture } = record

      if (!fileUrl || !picture) return

      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      // 一分钟内提交不成功关闭loading弹窗
      const timer = setTimeout(() => {
        loading.close()
      }, 60000)
      const answer_base64 = picture.split(',')
      const { data: answer } = await getCorrectChineseJsonApi(fileUrl)
      clearTimeout(timer)
      loading.close()

      if (!(Array.isArray(answer_base64) && answer_base64.length > 0) || typeof answer != 'object')
        return

      this.$route.params.answer_base64 = answer_base64
      this.$route.params.answer = answer
      this.$router.push('/pages/correct/chinese/result')
    }
  }
}
</script>

<style lang="scss" scoped>
.total {
  font-size: 20px;
}

.list-wrap {
  border-radius: 16px;

  .list {
    .item {
      height: 96px;
      border: 1px solid #e8e8e8;
      border-radius: 10px;

      &:first-child {
        margin-top: 20px;
      }

      .main {
        .name {
          font-size: 22px;
        }

        .detail {
          font-size: 16px;

          .divide {
            padding: 0 16px;
          }
        }
      }

      .analysis {
        width: 50px;

        .bg-level {
          height: 50px;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 50px 50px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
